<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>
</head>
<body>
<p>
    目标： 能够熟悉箭头函数不同写法 <br>
    目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁 <br>
    使用场景：箭头函数更适用于那些本来需要 写匿名函数的地方 (它不是替代原来函数的写法)
</p>
<p>
    学习路径： <br>
    1. 基本语法 <br>
    2. 箭头函数参数 <br>
    3. 箭头函数this
</p>
<hr>

<pre style="font-size: 20px;">
    总结:
    1. 箭头函数 属于表达式函数，因此不存在函数提升
    2. 箭头函数 只有一个参数时可以省略圆括号 ()
    3. 箭头函数 函数体只有一行代码时可以省略花括号 {}，并自动做为 return返回值 被返回
    4. 加括号的函数体,返回对象字面量表达式. (箭头函数可以直接返回一个对象)
</pre>

<script>

    // ---------  1. 箭头函数 基本语法 -------------
    // 普通函数, 写法
    const 函数 = function () {
        console.log('我是普通函数')
    }
    函数()

    // 1. 箭头函数 基本语法 写法
    const 基本语法_对象 = () => {
        console.log('基本语法_我是箭头函数')
    }
    基本语法_对象()


    // ------------- 语法2：只有一个参数可以省略小括号 -----------
    // 普通函数
    const 函数1 = function (x) {
        console.log(x + x)
    }
    函数1(2)

    // 语法2：只有一个参数可以省略小括号
    const 语法2_函数 = x => {
        console.log(x + x)
    }
    语法2_函数(33)


    // --- 语法3：如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回 ----
    // 普通函数
    const 函数2 = function (x, y) {
        return x + y
    }
    console.log(函数2(2, 4))

    // 语法3：如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回
    const 语法3_函数 = (x, y) => x + y
    console.log(语法3_函数(9, 4))


    // ------- 语法4：加括号的函数体返回对象字面量表达式 (箭头函数可以直接返回一个对象) ---------
    // 箭头函数, 可以直接返回一个对象
    const 语法4_对象 = (姓名) => ({姓名: 姓名})
    //                传参       {属性名: 值}是对象
    console.log(语法4_对象('孙新罡'))
</script>

</body>
</html>